<template>
  <a-modal v-model="hotspot" :footer="false" @cancel="shut" width="1020px" v-if="hotspot">
    <div id="viewer"></div>
  </a-modal>
</template>

<script>
// 引入720度视图组件
import {Viewer} from 'photo-sphere-viewer';
import { MarkersPlugin } from 'photo-sphere-viewer/dist/plugins/markers';
import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
import 'photo-sphere-viewer/dist/plugins/markers.css';


export default {
  name: 'PictureDisplay',
  components: {
  },
  data() {
    return {
      viewer: null,
      hotspot:false,  //  本身modal的状态
      hotspotTitle: '',   //  添加热点组件的标题
      hotspotVisible: false,  //  添加热点组件的状态
      marker: {
        id: 'image',
        longitude: null,
        latitude: null,
        image: 'https://photo-sphere-viewer.js.org/assets/pin-red.png',
        tooltip: '双击可以删除热点哦！<b>Click me!</b>'
      },
      form: {}
    };
  },
  methods: {
    //  本身的确认提交
    determine(){
      this.hotspot = false
    },
    //  本身的取消提交
    shut() {
      this.hotspot = false
    },
    //  本身的是否显示
    show(value){
      this.hotspot = true
      this.$nextTick(()=>{
        this.viewer = new Viewer({
          //  获取到页面当中的容器
          container: document.querySelector('#viewer'),
          //  所要展示的图片
          panorama: value,
          size: {
            width: '50vw',
            height: '80vh',
          },
          //  加载时的动画
          loadingImg: 'https://photo-sphere-viewer.js.org/assets/photosphere-logo.gif',
          //  默认维度
          defaultLat: 0.2,
          //  用两指触摸
          touchmoveTwoFingers: true,
          //  插件列表
          plugins: [
            //   标记插件
            [MarkersPlugin, {
              //   标记列表
              markers: [{
                // 该标记会弹出弹窗
                id: this.marker.id,
                longitude: this.marker.longitude,
                latitude: this.marker.latitude,
                image: this.marker.image,
                width: 32,
                height: 32,
                anchor: 'bottom center',
                tooltip: this.marker.tooltip, //提示框
              }]
            }]
          ]
        })
      })
    }
  },
};
</script>

<style lang="less" scoped>

</style>
